<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>发个信</title>
	<style>
		/* 下载页样式 */
		body,
		html {
			margin: 0;
			padding: 0;
			width: 100vw;
			overflow-x: hidden;
			line-height: 1;
			box-sizing: border-box;
		}

		div {
			box-sizing: border-box;
		}

		.logo-box {
			height: 500px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 180px;
			text-align: center;
		}

		.btn {
			width: 280px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border-radius: 40px;
			margin: 20px auto;
			background: linear-gradient(-90deg, #FB8F51 60%, #FB8F51 100%);
			color: #fff;
		}

		.gray {
			background: #999;
		}

		.show-msg {
			width: 100%;
			height: 50px;
			background-color: #FD7747;
			color: #fff;
			border-bottom: 0.5px solid #efefef;
			position: fixed;
			top: -60px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.show {
			transform: translateY(60px);
			transition: all 1s;
		}

		.banner {
			width: 100vw;
			height: 100vh;
			background-image: url("https://fgxfile.fagexin.online/fgx/1679394209551403.png");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			background-color: #FFFFFF;
		}

		.download-page {
			display: none;
		}





		/* 登录页样式 */
		input {
			border: 0;
			/*清除自带的2px的边框*/
			padding: 0;
			/*清除自带的padding间距*/
			outline: none;
			/*清除input点击之后的黑色边框*/
			background-color: rgba(0, 0, 0, 0);
		}

		input::-webkit-input-placeholder {
			color: #666;
		}

		.login-top {
			height: 200px;
			color: #FFF;
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding-bottom: 60px;
			padding-left: 17px;
			background: #FD7747 url("https://fgxfile.fagexin.online/fgx-admin17032123385518539.png") right bottom / 160px 160px no-repeat;
		}

		.login-content {
			background-color: #FFF;
			position: relative;
			z-index: 3;
			border-radius: 15px 15px 0 0;
			margin-top: -20px;
			padding: 22px 17px;

		}

		.login-input-box {
			padding: 0 17px;
			height: 38px;
			border-radius: 8px;
			background-color: #F5F6F7;
			display: flex;
			align-items: center;
			margin-top: 18px;
			font-size: 14px;
		}

		.login-input-box input {
			flex: 1;
			font-size: 13px;
			color: #333;
		}

		.get-verify {
			font-size: 13px;
			color: #666;
		}

		.active {
			color: #FD7747;
		}

		.login-verify {
			font-size: 13px;
			color: #999;
		}

		.hello {
			font-size: 30px;
			font-weight: bold;
		}

		.welcome {
			margin-top: 14px;
			font-size: 14px;
		}

		.login-text-ani {
			animation: login-ani 0.3s linear;
		}

		@keyframes login-ani {
			0% {
				transform: translateY(100px);
				opacity: 0;
			}

			20% {

				opacity: 0;
			}

			100% {
				transform: translateY(0);
				opacity: 1;
			}
		}

		.login-submit {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 262px;
			height: 40px;
			background-color: #FD7747;
			border-radius: 5px;
			color: #fff;
			font-size: 15px;
			font-weight: bold;
			margin: 50px auto 0 auto;
			opacity: 1;
			transition: all 0.2s;
		}

		.login-submit:active {
			opacity: 0.9;
		}

		.login-box-down-btn {
			display: flex;
			justify-content: flex-end;
			margin-top: 10px;
		}

		.login-box-down-btn span {
			font-size: 14px;
			padding: 10px;
		}

		.toast-box {
			position: fixed;
			z-index: 10;
			left: 50%;
			top: 36%;
			transform: translate(-50%, -50%);
			background-color: rgba(0, 0, 0, 0.66);
			padding: 7px 10px;
			border-radius: 4px;
			color: #FFF;
			font-size: 14px;
			max-width: 170px;
			line-height: 1.4;
			text-align: justify;
			display: none;
			text-align: center;
		}
	</style>
	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
	<script>
		let ROOT = "";
	</script>


	<!-- 下载页面 -->
	<div class="download-page">
		<div class="banner">
			<div class="footer">
				<div class="btn" id="download">下载发个信</div>
				<div class="btn  gray" id="btn">打开发个信</div>

				<div class="login-box-down-btn" style="margin-top:-20px;padding-right: 40px;">
					<span onclick="toShowPage('login')" class="active">注册账号</span>
				</div>

			</div>

			<div class="show-msg" id="msg">
				<div>点击右上角</div>
				<div style="margin-top:-20px;transform: scale(2);margin-left:10px;margin-right:10px;">...</div>
				<div>，用默认浏览器下载</div>
			</div>
		</div>


	</div>
	<!-- 下载页面 -->


	<!-- 登录页面 -->
	<div class="login-page">

		<div class="login-top">
			<div class="login-text-ani">
				<div class="hello">HELLO,</div>
				<div class="welcome">欢迎注册使用发个信</div>
			</div>
		</div>

		<div class="login-content">
			<div class="login-input-box">
				<input class="phone" type="number"  maxlength="11" placeholder="请输入手机号" />
			</div>
			<div class="login-input-box">
				<input class="verify" type="number" maxlength="11" placeholder="请输入验证码" />
				<div class="get-verify active" onclick="getVerifyCode()">获取验证码</div>
			</div>
			<div class="login-input-box login-verify" style="display: none;">
				<div class="">邀请码：5555</div>
			</div>


			<div class="login-submit" onclick="toSubmit()">
				注册
			</div>

			<div class="login-box-down-btn">
				<span onclick="toShowPage('download')" class="active">下载App</span>
			</div>




		</div>


	</div>
	<!-- 登录页面 -->

	<!-- 提示 -->
	<div class="toast-box">

	</div>
	<!-- 提示 -->


	<script>
		var download = document.getElementById("download")
		var btn = document.getElementById("btn")
		var ua = navigator.userAgent.toLowerCase(); //获取判断是否是微信浏览器
		var msg = document.getElementById("msg")
		var xhr = new XMLHttpRequest();
		var downloadUrl;
		let windowParams = {};
		window.location.search.replace("?", "").split('&').map(v => {
			let vv = v.split('=');
			windowParams[vv[0]] = vv[1] || "";
		});
		console.log(windowParams);
		if (windowParams.invite) {
			let loginVerify = document.querySelector('.login-verify');
			loginVerify.textContent = `邀请码：${windowParams.invite}`;
			loginVerify.style.display = 'flex';
		}

		$.ajax({
			url: ROOT + "/chat/configList",
			success: res => {
				if (res.data) {
					downloadUrl = res.data.ANDROID_DOWNLOAD_URL;
				}
				console.log('downloadUrl', downloadUrl);
			}
		});


		// 下载发个信
		download.addEventListener("click", (e) => {
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				msg.classList.add("show")
			} else {
				window.location.href = downloadUrl
			}
		})
		// 打开发个信
		btn.addEventListener("click", (e) => {
			// fagexin://aaa?path=/pages/login/login&invite=123456
			let params = window.location.search.replace("?", "&") //邀请码
			console.log('xxxxxxxxxxxx', "fagexin://aaa?path=/pages/login/login" + params);
			window.location.href = "fagexin://aaa?path=/pages/login/login" + params
		})


		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			msg.classList.add("show")
		}
	</script>


	<script>
		function toShowPage(TYPE) {

			let loginPage = document.querySelector('.login-page');
			let download = document.querySelector('.download-page');
			if (TYPE == 'download') {
				loginPage.style.display = 'none';
				download.style.display = 'block';
			} else {
				loginPage.style.display = 'block';
				download.style.display = 'none';
			}
		}

		let showToastTimer = null;
		function showToast(message, time = 3000) {
			let toastDom = document.querySelector('.toast-box');
			clearTimeout(showToastTimer);
			showToastTimer = setTimeout(() => {
				toastDom.style.display = 'none';
			}, time);
			toastDom.textContent = message;
			toastDom.style.display = 'block';
		}

		function toSubmit() {
			if (this.loading) return;
			let invite = windowParams.invite || '';
			let phoneDom = document.querySelector('.phone');
			let phone = String(phoneDom.value).trim();
			let verifyDom = document.querySelector('.verify');
			let verify = String(verifyDom.value).trim();

			if (phone.length !== 11) {
				showToast('请输入11位手机号码');
				return;
			}
			if (verify.length == 0) {
				showToast('请输入验证码');
				return;
			}
			this.loading = true;
			let subData = {
				scenario: 'login_code',
				phone: phone,
				code: verify,
			};
			if (windowParams.invite) {
				subData.parentUserId = windowParams.invite;
			}
			$.ajax({
				url: ROOT + '/login/loginByScenario',
				method: 'POST',
				data: JSON.stringify(subData),
				contentType: 'application/json;charset:utf-8;',
				success: res => {
					this.loading = false;

					if (res.status == 200) {
						showToast('注册成功,请下载App使用哦', 6000);
						verifyDom.value = "";
						toShowPage('download');
					} else {
						showToast(res.msg);
					}
				},
				error: res => {
					this.loading = false;
				}
			});

		}

		function getVerifyCode() {

			let phoneDom = document.querySelector('.phone');
			let phone = String(phoneDom.value).trim();
			let verifyDom = document.querySelector('.verify');
			let verify = String(verifyDom.value).trim();
			verifyDom.value = "";
			let verifyTextDom = document.querySelector('.get-verify');
			if (verifyTextDom.textContent != '获取验证码') {
				showToast('请稍后重试');
				return;
			}
			if (phone.length !== 11) {
				showToast('请输入11位手机号码');
				return;
			}
			if (this.loadingVerify) {
				return;
			}
			this.loadingVerify = true;
			$.ajax({
				url: ROOT + '/login/getCode',
				data: { phone },
				success: res => {
					this.loadingVerify = false;

					if (res.status == 200) {
						changeVerifyDom(verifyTextDom);
					} else {
						showToast(res.msg);

					}
				},
				error: res => {
					this.loadingVerify = false;
				}
			});


		}

		function changeVerifyDom(dom) {
			let time = 60;
			this.verifyTimer = setInterval(function () {
				--time;
				if (time == 0) {
					dom.textContent = '获取验证码';
					clearInterval(this.verifyTimer);
				} else {
					dom.textContent = `${time}秒后重试`;
				}

			}, 1000);
		}
	</script>
</body>

</html>